<template>
  <div class="listcontent">
    <router-link tag="div" :to="'/detail/'+item.id" class="goods" v-for="item in goodsList" :key="item.id">
        <div class="goods_img">
            <img :src="item.imgUrl" alt="">
        </div>
        <div class="attr">
            <div class="title">
                {{item.title}}
            </div>
            <div class="price">
                ￥ {{item.price}} <span><img src="../../../../static/images/goods_price.png" alt=""></span>
            </div>
            <div class="shipper">
                发货方： <img src="../../../../static/images/shipper.png"> {{item.shipper}}
            </div>
        </div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'ListContent',
  props:{
      goodsList:Array
  },
  data () {
    return {
      
    }
  }
}
</script>


<style lang="stylus" scoped>
.listcontent
    background-color #efefef
    padding-top 1.8rem 
    height 30rem
    .goods 
        width 45%
        float left
        height 4.5rem
        margin .2rem 0 0 .2rem
        background-color #fff
        border 1px solid rgba(239,239,239,0.6)
        border-radius .2rem
        .goods_img img 
            width 100%
            height 2.7rem
            border-top-left-radius .2rem
            border-top-right-radius .2rem
        .attr 
            padding .3rem .1rem
            width 100%
            .title
                font-size .26rem
                line-height .26rem
                padding .1rem 0
            .price 
                font-size .28rem
                color red
                padding .1rem 0
                img 
                    width 1rem
                    vertical-align middle
                    margin-top -.1rem 
            .shipper
                padding .05rem 
                font-size .24rem
                img 
                    margin-top -.1rem
                    margin-right .1rem 
</style>
